<template>
  <div class="knowledge-detail-container-padding">
    <!-- tabs start -->
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="项目内容" name="first">
        <DetailContent />
      </el-tab-pane>
      <el-tab-pane label="相关审核" name="second">
        <DetailAudit />
      </el-tab-pane>
      <el-tab-pane label="相关会议" name="third">
        <DetailConference />
      </el-tab-pane>
      <el-tab-pane label="相关文档" name="fourth">
        <DetailDoc />
      </el-tab-pane>
    </el-tabs>
    <!-- tabs end -->
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'ProjectKnowledgeDetail',
    components: {
      DetailContent: defineAsyncComponent(
        () => import('./components/detailContent')
      ),
      DetailAudit: defineAsyncComponent(
        () => import('./components/detailAudit')
      ),
      DetailConference: defineAsyncComponent(
        () => import('./components/detailConference')
      ),
      DetailDoc: defineAsyncComponent(() => import('./components/detailDoc')),
    },
    setup() {
      const activeName = ref('first')

      return {
        activeName,
      }
    },
  })
</script>
